<template>
  <view class="noticeComBox">
    <uni-icons type="notification-filled" size="26" class="image" color="rgb(245, 82, 82)"></uni-icons>
    <view v-if="isMove" class="message">{{ props.message }}</view>
    <view class="detail">点击查看 </view>
  </view>
</template>

<!-- 置顶公告组件 -->
<script lang="ts" setup>
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { ref } from 'vue'
//字幕滚动展示控制
const isMove = ref<boolean>(true)

//接受父组件的参数
const props = defineProps({
  message: {
    type: String,
    default:
      '产品咨询请客服扫描二维码添加微信',
  },
})

// 页面周期函数--监听页面加载
onLoad(() => {})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {
  isMove.value = true
})
// 页面周期函数--监听页面隐藏
onHide(() => {
  isMove.value = false
})
// 页面周期函数--监听页面卸载
onUnload(() => {})
</script>

<style scoped lang="scss">
.noticeComBox {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgb(72, 71, 71);
  padding: 5rpx;
  background-color: rgb(255, 255, 255);
  height: 70rpx;
  overflow: hidden;

  .image {
    padding: 0 10rpx;
    z-index: 9;
    background-color: rgb(255, 255, 255);
  }

  .detail {
    margin-left: auto;
    font-size: 27rpx;
    padding-right: 15rpx;
  }

  .message {
    width: calc(100% - 210rpx);
    animation: moven 1s linear 2s 1 forwards;
    padding: 0 10rpx;
    height: 52rpx;
    line-height: 52rpx;
    border-radius: 5rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(0);
    background-color: rgba(213, 209, 209, 0.562);
  }

  @keyframes moven {
    0% {
      transform: scaleY(0);
    }
    25% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(0);
    }
    60% {
      transform: scaleY(1);
    }
    70% {
      transform: scaleY(0);
    }
    80% {
      transform: scaleY(1);
    }
    90% {
      transform: scaleY(0);
    }
    100% {
      transform: scaleY(1);
    }
  }
}
</style>
